import React, { FC, CSSProperties, Children } from 'react';
import classNames from 'classnames';
import RowContext from './context';

export interface rowTypeProps {
  gutter?: number;
  className?: string;
  style?: CSSProperties;
}

export const row: FC<rowTypeProps> = props => {
  const { className, style, children, gutter = 0 } = props;

  const classes = classNames(className, `ant-row`);

  // 设置间隔后，两边要扩充一个间隔
  const styleTrans = {
    marginLeft: `-${gutter / 2}px`,
    marginRight: `-${gutter / 2}px`,
    ...style,
  };

  return (
    <RowContext.Provider value={{ gutter }}>
      <div className={classes} style={styleTrans}>
        {children}
      </div>
    </RowContext.Provider>
  );
};
export default row;
